<template>
  <div class="home">
    <van-tabs @click="onClick">
      <van-tab :title="daohang[0].name" class="home-one test-1">
        <div class="one-kuan">
          <div class="Swipe">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="(item, index) in Swipe" :key="index">
                <img :src="item.imageUrl" alt="" />
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <div class="one-kuan-gedan">
          <div class="gedan">热门推荐</div>
          <div class="gedan-kuan">
            <div
              class="kuan-one"
              v-for="(item, index) in HomeData0"
              :key="index"
              @click="Details(item.id)"
            >
              <img :src="item.picUrl" alt="" />
              <div class="text-one">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="music">
          <div class="music-one">
            最新音乐<van-icon name="arrow" class="music-one-img" />
          </div>
          <div class="music-kuan">
            <div
              class="muxic-kuan-on"
              v-for="(item, index) in musicShuju"
              :key="index"
              @click="TransmitData(item.id, item.picUrl, item.name)"
            >
              <div class="muxic-zuo">
                <img :src="item.picUrl" alt="" />
                <div class="xiao-img">
                  <img src="../assets/bofan.png" alt="" />
                </div>
              </div>
              <div class="muxic-you">
                <div class="shang-text">{{ item.name }}</div>
                <div class="xia-text">{{ item.song.artists[0].name }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="daohang[1].name" class="home-one test-1">
        <div class="Ranking">
          <div class="Ranking-kuan">
            <div class="official-text">官方榜</div>
            <div
              class="official-neiron"
              v-for="(item, index) in official"
              :key="index"
            >
              <div class="official-one">
                <div class="official-img">
                  <img
                    :src="item.coverImgUrl"
                    alt=""
                    @click="Details(item.id)"
                  />
                </div>
                <div class="official-ge">
                  <Bg v-if="item.name == '飙升榜'" :Bg="Ranking1"></Bg>
                  <Bg v-if="item.name == '新歌榜'" :Bg="Ranking2"></Bg>
                  <Bg v-if="item.name == '原创榜'" :Bg="Ranking3"></Bg>
                  <Bg v-if="item.name == '热歌榜'" :Bg="Ranking4"></Bg>
                </div>
              </div>
              <div class="official-two" @click="Details(item.id)">
                查看全部<van-icon name="arrow" />
              </div>
            </div>
            <div class="Global-text">全球榜</div>
            <div
              class="Global-neiron"
              v-for="(item, index) in Global"
              :key="index"
              @click="Details(item.id)"
            >
              <div class="Global-img">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="Global-neiron-text">
                {{ item.name }}
              </div>
            </div>
          </div>
          <!-- <div class="Global-kuan"></div> -->
        </div>
      </van-tab>
      <van-tab :title="daohang[2].name" class="home-one test-1">
        <div class="SongSheet">
          <div class="classification">
            <div class="classification-text-one" @click="classification()">
              分类<van-icon :name="vanicon" class="van" />
            </div>
            <div class="classification-text-two" @click="classification()">
              {{ fenleitext }}
            </div>
            <div v-if="IFclassification" class="dingwei">
              <div class="dingwei-kuan-one">歌单分类:</div>
              <div class="flei">
                <div
                  class="xiao-kuan"
                  v-for="(item, index) in classification1"
                  :key="index"
                >
                  <div class="xiao-text" @click="classification(item.name)">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div class="dingwei-kuan-one">热门歌单:</div>
              <div class="fleiOne">
                <div
                  class="xiao-kuan"
                  v-for="(item, index) in classificationOne"
                  :key="index"
                >
                  <div class="xiao-text" @click="classification(item.name)">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div class="dingwei-kuan-one">精品歌单:</div>
              <div class="fleiTwo">
                <div
                  class="xiao-kuan"
                  v-for="(item, index) in classificationTwo"
                  :key="index"
                >
                  <div class="xiao-text" @click="classification(item.name)">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="SongSheet-shuju">
            <div
              class="shuju-kuan"
              v-for="(item, index) in SongSheetShuju"
              :key="index"
              @click="Details(item.id)"
            >
              <div class="shuju-img">
                <img :src="item.coverImgUrl" alt="" />
              </div>
              <div class="shuju-text">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="daohang[3].name" class="home-one test-1">
        <div class="SingerList">
          <div class="SingerList-neiron">
            <div
              class="SingerList-kuan"
              v-for="(item, index) in SingerListshuju"
              :key="index"
              @click="SingerDetailsPage(item.id)"
            >
              <div class="SingerList-img">
                <img :src="item.img1v1Url" alt="" />
              </div>
              <div class="SingerList-text">
                {{ item.name }}
              </div>
            </div>
            <div class="clear"></div>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
            </van-list>
          </div>
        </div>
      </van-tab>
      <van-tab :title="daohang[4].name" class="home-one test-1">
        <div class="musicqingqiu2">
          <div class="musicqingqiu2-one"></div>
          <div class="musicqingqiu2-two">
            <div
              class="musicqingqiu2-two-kuan"
              v-for="(item, index) in musicqingqiu2shuju"
              :key="index"
              :class="[index % 2 == 0 ? 'accicon' : '']"
            >
              <div class="kuan-shu" @click="TransmitData(item.id)">
                {{ index + 1 }}
              </div>
              <div class="kuan-img">
                <img :src="item.picUrl" alt="" />
                <div class="xiao-img">
                  <img
                    src="../assets/bofan.png"
                    alt=""
                    @click="TransmitData(item.id)"
                  />
                </div>
              </div>
              <div class="kuan-text-one" @click="TransmitData(item.id)">
                {{ item.name }}
              </div>
              <div
                class="kuan-text-two"
                @click="SingerDetailsPage(item.song.artists[0].id)"
              >
                {{ item.song.artists[0].name }}
              </div>
              <div
                class="kuan-text-three"
                @click="AlbumDetails(item.song.album.id)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="daohang[5].name" class="home-one test-1">
        <div class="content">
          <div class="region">
            <div class="region-one">地区：</div>
            <div
              class="region-two"
              v-for="(item, index) in region"
              :key="index"
            >
              <div
                class="kuan"
                :class="[regionshu == index ? 'acvert' : '']"
                @click="regionShijian(index, item.name)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="region">
            <div class="region-one">顺序：</div>
            <div class="region-two" v-for="(item, index) in sort" :key="index">
              <div
                class="kuan"
                :class="[sortshu == index ? 'acvert' : '']"
                @click="sortShijian(index, item.name)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="content-type">
            <div
              class="MV-kuan"
              v-for="(item, index) in MVcontent"
              :key="index"
              @click="Videotiaozhuan(item.id)"
            >
              <div class="MV-img">
                <img :src="item.cover" alt="" />
              </div>
              <div class="MV-text">
                <div class="MV-text-one">{{ item.name }}</div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
import Bg from "../components/Bg.vue";
export default {
  name: "Home",
  components: {
    Bg,
  },
  data() {
    return {
      value: "",
      fenleitext: "全部",
      Swipe: [],
      vanicon: "arrow-down",
      IFclassification: false,
      classification1: [],
      classificationOne: [],
      classificationTwo: [],
      SongSheetShuju: [],
      activeIndex: 0,
      HomeData0: [],
      musicShuju: [],
      daohang: [
        { name: "推荐" },
        { name: "排行" },
        { name: "歌单" },
        { name: "歌手" },
        { name: "最新音乐" },
        { name: "MV" },
      ],
      official: [],
      Global: [],
      Ranking1: [],
      Ranking2: [],
      Ranking3: [],
      Ranking4: [],
      SingerListType: 0,
      SingerListshuju: [],
      loading: false,
      finished: false,
      musicqingqiu2shuju: [],
      ifEavr: false,
      regionshu: 0,
      region: [
        { name: "全部" },
        { name: "内地" },
        { name: "港台" },
        { name: "欧美" },
        { name: "韩国" },
        { name: "日本" },
      ],
      regionshuju: "全部",
      sortshu: 0,
      sort: [{ name: "上升最快" }, { name: "最热" }, { name: "最新" }],
      sortshuju: "上升最快",
      MVcontent: [],
    };
  },
  created() {
    this.HomeData();
    this.Swipeqingqiu();
    this.musicqingqiu();
    // this.musicqingqiu2();
    this.gai();
  },
  methods: {
    //地区事件
    regionShijian(i, e) {
      this.MVcontent = [];
      this.regionshu = i;
      this.regionshuju = e;
      this.MVQingqiu();
    },
    //排序事件
    sortShijian(i, e) {
      this.MVcontent = [];
      this.sortshu = i;
      this.sortshuju = e;
      this.MVQingqiu();
    },
    //MV请求
    MVQingqiu() {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/music/mv/all?area=" +
          this.regionshuju +
          "&order=" +
          this.sortshuju +
          "&limit=10000",
      })
        .then((result) => {
          console.log("result=5=>", result);
          this.MVcontent = result.data.data;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    Videotiaozhuan(id) {
      this.$router.push({ name: "Video", params: { id } });
    },
    TransmitData(e, i, l) {
      let shuzu = JSON.parse(JSON.stringify(this.$store.state.play));
      this.$store.commit("updateTwo", { data: e });
      this.axios({
        method: "get",
        url: "/song/url?id=" + e,
      })
        .then((result) => {
          // console.log("result==>", result);
          // console.log("i==>",i);
          // console.log("l==>",l);
          this.$store.commit("updateOne", { data: result.data.data[0].url });
          this.$store.commit("updateL", { data: l });
          this.$store.commit("updateI", { data: i });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      if (shuzu.length == 0) {
        this.$store.state.play.unshift(e);
      }
      // console.log(shuzu);
      if (shuzu.length > 0) {
        for (let index = 0; index < shuzu.length; index++) {
          // console.log("e==>", e);
          if (e == shuzu[index]) {
            // console.log("shuzu[index]==>", shuzu[index]);
            shuzu.splice(index, 1);
            shuzu.unshift(e);
            this.$store.state.play = shuzu;
            return;
          }
        }
        this.$store.state.play.unshift(e);
      }
      this.axios({
        method: "get",
        url: "/song/detail?ids=" + e,
      })
        .then((result) => {
          // console.log("result==>", result.data.songs[0]);
          // this.like = result.data.songs;
          this.$store.commit("update", { data: result.data.songs[0] });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      this.axios({
        method: "get",
        url: "/lyric?id=" + e,
      })
        .then((result) => {
          // console.log("result==>", result.data.lrc.lyric);
          this.$store.commit("updateLyric", { data: result.data.lrc.lyric });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    AlbumDetails(id) {
      // console.log('id==>',id);
      this.$router.push({ name: "AlbumDetails", params: { id } });
    },
    SingerDetailsPage(id) {
      // console.log('id==>',id);
      this.$router.push({ name: "SingerDetailsPage", params: { id } });
    },
    Details(id) {
      // console.log('id==>',id);
      this.$router.push({ name: "Details", params: { id } });
    },
    classification(text = this.fenleitext) {
      this.fenleitext = text;
      if (this.vanicon == "arrow-down") {
        this.vanicon = "arrow-up";
        this.IFclassification = true;
      } else {
        this.vanicon = "arrow-down";
        this.IFclassification = false;
      }
      this.SongSheetQingqiu();
    },
    onClick(name, title) {
      if (title == "推荐") {
      }
      if (title == "排行") {
        this.RankingQingqiu();
        this.RankingQingqiu1();
        this.RankingQingqiu2();
        this.RankingQingqiu3();
        this.RankingQingqiu4();
      }
      if (title == "歌单") {
        this.classificationQingqiu();
        this.classificationQingqiuOne();
        this.classificationQingqiuTwo();
        this.SongSheetQingqiu();
      }
      if (title == "歌手") {
        this.SingerList();
      }
      if (title == "最新音乐") {
        this.musicqingqiu2();
      }
      if (title == "MV") {
        this.MVQingqiu();
      }
    },
    gai() {
      setInterval(() => {
        this.$store.state.activeIndex = this.activeIndex;
        this.ifEavr = this.$store.state.ifEavr;
      }, 100);
    },
    //热门推荐
    HomeData() {
      this.axios({
        method: "get",
        url: "/personalized?limit=100",
      })
        .then((result) => {
          // console.log("result==>", result.data.result);
          let randoms = [];
          //随机产生mix-max之间的一个数（避免首末概率不均，采用max+1，向下取整）
          function randomInteger(min, max) {
            let rand = min + Math.random() * (max + 1 - min);
            return Math.floor(rand);
          }
          while (true) {
            //定义一个变量保存是否存在
            var isExists = false;
            // 获取一个1–100之间的数
            var random = randomInteger(1, 100);
            // 判断当前随机数是否已经存在
            //通过randoms.length来确定要判断几次
            for (let i = 0; i < randoms.length; i++) {
              if (random === randoms[i]) {
                isExists = true;
                break;
              }
            }
            // 如果不存在，则添加进去
            if (!isExists) randoms.push(random);
            // 如果有10位随机数了，就跳出
            if (randoms.length === 10) break;
          }
          for (let i = 0; i < randoms.length; i++) {
            // let suijishu = Math.round(Math.random() * 100);
            result.data.result[randoms[i]];
            this.HomeData0.push(result.data.result[randoms[i]]);
          }
          // console.log("this.HomeData0==>", this.HomeData0);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //轮播图
    Swipeqingqiu() {
      this.axios({
        method: "get",
        url: "/banner",
      })
        .then((result) => {
          // console.log("result==>", result);
          this.Swipe = result.data.banners;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //最新音乐
    musicqingqiu() {
      this.axios({
        method: "get",
        url: "/personalized/newsong?limit=12",
      })
        .then((result) => {
          // console.log("result==>", result.data.result);
          this.musicShuju = result.data.result;
          // console.log('this.musicShuju==>',this.musicShuju);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //排行榜
    RankingQingqiu() {
      this.axios({
        method: "get",
        url: "/toplist",
      })
        .then((result) => {
          // console.log("result==>", result);
          let munber = result.data.list;
          for (let i = 0; i < munber.length; i++) {
            if (i <= 3) {
              this.official.push(munber[i]);
            }
            if (i > 3) {
              this.Global.push(munber[i]);
            }
          }
          // console.log("this.official==>", this.official);
          // console.log("this.Global==>", this.Global);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //歌单分类
    classificationQingqiu() {
      this.axios({
        method: "get",
        url: "/playlist/catlist",
      })
        .then((result) => {
          // console.log("result=1=>", result.data.sub);
          this.classification1 = result.data.sub;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //热门歌单分类
    classificationQingqiuOne() {
      this.axios({
        method: "get",
        url: "/playlist/hot",
      })
        .then((result) => {
          // console.log("result=2=>", result.data.tags);
          this.classificationOne = result.data.tags;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //精品歌单标签列表
    classificationQingqiuTwo() {
      this.axios({
        method: "get",
        url: "/playlist/highquality/tags",
      })
        .then((result) => {
          // console.log("result=3=>", result.data.tags);
          this.classificationTwo = result.data.tags;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //获取精品歌单
    SongSheetQingqiu() {
      this.axios({
        method: "get",
        url:
          "/top/playlist/highquality?cat=" +
          this.fenleitext +
          "&before=0&limit=1000",
      })
        .then((result) => {
          // console.log("result=4=>", result.data.playlists);
          this.SongSheetShuju = result.data.playlists;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //歌手榜
    SingerList() {
      this.axios({
        method: "get",
        url: "/toplist/artist?type=" + this.SingerListType,
      })
        .then((result) => {
          // console.log("result=5=>", result);
          this.SingerListshuju = result.data.list.artists;
        })
        .catch((err) => {
          // console.log("err==>", err);
        });
    },
    //加载歌手榜
    onLoad() {
      this.SingerListType += 1;
      this.axios({
        method: "get",
        url: "/toplist/artist?type=" + this.SingerListType,
      })
        .then((result) => {
          // console.log("result=6=>", result);
          let shuju = result.data.list.artists;
          for (let i = 0; i < shuju.length; i++) {
            this.SingerListshuju.push(shuju[i]);
          }
          // 数据全部加载完成
          if (shuju.length < 99) {
            this.finished = true;
          }
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      // 加载状态结束
      this.loading = false;
    },
    //最新音乐2
    musicqingqiu2() {
      this.axios({
        method: "get",
        url: "/personalized/newsong?limit=100",
      })
        .then((result) => {
          // console.log("result=7=>", result.data.result);
          this.musicqingqiu2shuju = result.data.result;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    RankingQingqiu1() {
      this.axios({
        method: "get",
        url: "/playlist/track/all?id=19723756&limit=100000&offset=1",
      })
        .then((result) => {
          // console.log("result=1=>", result.data.songs);
          let munber = result.data.songs;
          for (let i = 0; i < munber.length; i++) {
            if (i <= 5) {
              this.Ranking1.push(munber[i]);
            }
          }
          // console.log('this.Ranking1==>',this.Ranking1);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    RankingQingqiu2() {
      this.axios({
        method: "get",
        url: "/playlist/track/all?id=3779629&limit=100000&offset=1",
      })
        .then((result) => {
          // console.log("result=1=>", result);
          let munber = result.data.songs;
          for (let i = 0; i < munber.length; i++) {
            if (i <= 5) {
              this.Ranking2.push(munber[i]);
            }
          }
          // console.log('this.Ranking2==>',this.Ranking2);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    RankingQingqiu3() {
      this.axios({
        method: "get",
        url: "/playlist/track/all?id=2884035&limit=100000&offset=1",
      })
        .then((result) => {
          // console.log("result=1=>", result);
          let munber = result.data.songs;
          for (let i = 0; i < munber.length; i++) {
            if (i <= 5) {
              this.Ranking3.push(munber[i]);
            }
          }
          // console.log('this.Ranking3==>',this.Ranking3);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    RankingQingqiu4() {
      this.axios({
        method: "get",
        url: "/playlist/track/all?id=3778678&limit=100000&offset=1",
      })
        .then((result) => {
          // console.log("result=1=>", result);
          let munber = result.data.songs;
          for (let i = 0; i < munber.length; i++) {
            if (i <= 5) {
              this.Ranking4.push(munber[i]);
            }
          }
          // console.log('this.Ranking4==>',this.Ranking4);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
.home {
  width: 712.5px;
  height: 500px;
  background-color: rgb(255, 255, 255);
  .home-one {
    width: 100%;
    height: 470px;
    overflow-y: scroll;
    .one-kuan {
      width: 100%;
      height: 200px;
      padding-top: 20px;
      .Swipe {
        width: 80%;
        height: 180px;
        margin: 0 auto;
        .my-swipe .van-swipe-item {
          color: #fff;
          font-size: 20px;
          height: 180px;
          text-align: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .one-kuan-gedan {
      width: 100%;
      height: 300px;
      .gedan {
        width: calc(100% - 40px);
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
      }
      .gedan-kuan {
        width: 100%;
        height: 260px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-evenly;
        .kuan-one {
          width: 19%;
          height: 120px;
          border-radius: 5px;
          position: relative;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
          .text-one {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: calc(100% - 20px);
            height: 25px;
            padding: 0 10px;
            color: rgb(245, 245, 245);
            border-radius: 0 0 5px 5px;
            background-color: rgba(0, 0, 0, 0.4);
          }
        }
      }
    }
    .music {
      width: 100%;
      height: 300px;
      .music-one {
        width: calc(100% - 40px);
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        .music-one-img {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          float: right;
        }
      }
      .music-kuan {
        width: 100%;
        height: 260px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .muxic-kuan-on {
          width: 30%;
          height: 55px;
          border-radius: 5px;
          cursor: pointer;
          .muxic-zuo {
            width: 55px;
            height: 55px;
            float: left;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
            }
            .xiao-img {
              position: absolute;
              top: 18.5px;
              left: 18.5px;
              width: 20px;
              height: 20px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .muxic-you {
            width: 74%;
            height: 55px;
            float: left;
            .shang-text {
              width: calc(100% - 10px);
              line-height: 30px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 30px;
              font-size: 11px;
              padding-left: 10px;
            }
            .xia-text {
              width: calc(100% - 10px);
              line-height: 25px;
              font-size: 8px;
              color: rgb(180, 180, 180);
              padding-left: 10px;
            }
          }
        }
        .muxic-kuan-on:hover {
          background-color: rgb(235, 235, 235);
        }
      }
    }
    .content {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      padding: 20px;
      .region {
        width: 100%;
        height: 30px;
        line-height: 30px;
        .region-one {
          width: 30px;
          height: 30px;
          float: left;
        }
        .region-two {
          width: 50px;
          height: 20px;
          padding: 5px;
          line-height: 20px;
          float: left;
          text-align: center;
          .kuan {
            width: 100%;
            height: 100%;
            border-radius: 3px;
            background-color: rgb(240, 240, 240);
            cursor: pointer;
          }
          .acvert {
            background-color: rgb(220, 220, 220);
          }
        }
      }
      .content-type {
        width: 100%;
        height: 100%;
        .MV-kuan {
          float: left;
          width: calc(33% - 10px);
          height: 130px;
          padding: 5px;
          cursor: pointer;
          .MV-img {
            width: 100%;
            height: 105px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
            }
          }
          .MV-text {
            .MV-text-one {
              width: 100%;
              height: 25px;
              font-weight: 300;
              font-size: 11px;
              line-height: 25px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
.Ranking {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  .Ranking-kuan {
    width: 100%;
    height: 100%;
    .official-text {
      width: 100%;
      height: 40px;
      font-size: 18px;
      line-height: 40px;
    }
    .official-neiron {
      width: 100%;
      height: 200px;
      cursor: pointer;
      .official-one {
        width: 100%;
        height: 180px;
        .official-img {
          width: 180px;
          height: 180px;
          float: left;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
        .official-ge {
          float: left;
          width: 70%;
          height: 180px;
        }
      }
      .official-two {
        width: calc(100% - 200px);
        height: 20px;
        padding-left: 200px;
        line-height: 20px;
        color: rgb(121, 121, 121);
        cursor: pointer;
      }
      .official-two:hover {
        color: rgb(0, 0, 0);
      }
    }
    .Global-text {
      width: 100%;
      height: 40px;
      font-size: 18px;
      line-height: 40px;
    }
    .Global-neiron {
      float: left;
      width: calc(20% - 20px);
      height: 180px;
      padding: 10px;
      cursor: pointer;
      .Global-img {
        width: 114px;
        height: 114px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .Global-neiron-text {
        width: 100%;
        height: 56px;
        font-size: 11px;
        padding-top: 5px;
        word-break: break-all;
      }
    }
  }
}
.SongSheet {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  .classification {
    width: 100%;
    height: 40px;
    position: relative;
    .dingwei {
      width: calc(100% - 40px);
      padding: 0 20px;
      height: 350px;
      position: absolute;
      top: 40px;
      left: 0px;
      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(235, 235, 235);
      .dingwei-kuan-one {
        width: 100%;
        height: 30px;
        line-height: 30px;
      }
      .flei {
        width: 100%;
        height: 140px;
      }
      .fleiOne {
        width: 100%;
        height: 20px;
      }
      .fleiTwo {
        width: 100%;
        height: 80px;
      }
      .xiao-kuan {
        width: 52.5px;
        height: 15px;
        padding: 2.5px 5px;
        float: left;
        .xiao-text {
          width: 100%;
          height: 100%;
          border-radius: 10px;
          line-height: 15px;
          text-align: center;
          cursor: pointer;
          background-color: rgb(235, 235, 235);
        }
      }
    }
    .classification-text-one {
      float: left;
      font-size: 16px;
      line-height: 40px;
      cursor: pointer;
      .van {
        margin-left: 10px;
      }
    }
    .classification-text-two {
      float: right;
      font-size: 16px;
      line-height: 40px;
      cursor: pointer;
      color: rgb(255, 124, 124);
    }
  }
  .SongSheet-shuju {
    width: 100%;
    .shuju-kuan {
      width: 105px;
      height: 160px;
      padding: 10px;
      float: left;
      cursor: pointer;
      .shuju-img {
        width: 105px;
        height: 105px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }
      .shuju-text {
        width: 105px;
        height: 50px;
        padding-top: 5px;
        white-space: pre-wrap;
      }
    }
  }
}
.SingerList {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  .SingerList-neiron {
    width: 100%;
    height: 100%;
    .SingerList-kuan {
      float: left;
      width: calc(133.5px - 20px);
      height: calc(170px - 20px);
      padding: 10px;
      cursor: pointer;
      .SingerList-img {
        width: 113.5px;
        height: 113.5px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }
      .SingerList-text {
        width: 113.5px;
        height: 31.5px;
        padding-top: 5px;
      }
    }
  }
}
.musicqingqiu2 {
  width: 100%;
  height: 100%;
  .musicqingqiu2-one {
    width: 100%;
    height: 40px;
  }
  .musicqingqiu2-two {
    width: calc(100% - 20px);
    height: 100%;
    .musicqingqiu2-two-kuan {
      width: 100%;
      height: 60px;
      padding: 0 10px;
      line-height: 60px;
      cursor: pointer;
      color: rgb(134, 134, 134);
      .kuan-shu {
        float: left;
        width: 5%;
        height: 60px;
        text-align: center;
      }
      .kuan-img {
        float: left;
        width: calc(9% - 6px);
        height: calc(60px - 6px);
        padding: 3px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
        .xiao-img {
          position: absolute;
          top: 20px;
          left: 20px;
          width: 20px;
          height: 20px;
          line-height: 0px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .kuan-text-one {
        float: left;
        width: calc(44% - 10px);
        height: 60px;
        padding-left: 10px;
      }
      .kuan-text-two {
        float: left;
        width: 21%;
        height: 60px;
      }
      .kuan-text-two:hover {
        color: black;
      }
      .kuan-text-three {
        float: left;
        width: 21%;
        height: 60px;
      }
      .kuan-text-three:hover {
        color: black;
      }
    }
    .musicqingqiu2-two-kuan:hover {
      background-color: rgb(235, 235, 235);
    }
    .accicon {
      background-color: rgb(245, 245, 245);
    }
  }
}
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 100%;
  height: 30px;
}
.clear {
  clear: both;
  width: 100%;
  height: 1px;
}
</style>